const e = `<!--
 * @Description: 默认的日期时间选择器示例
-->
<template>
  <s-form label-width="10em" colon="：">
    <s-form-item label="选择器类型">
      <s-radio-group v-model="options.type" :options="datetimePickerTypeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="选择器主题">
      <s-radio-group v-model="options.theme" :options="datetimePickerThemeList"></s-radio-group>
    </s-form-item>
    <s-form-item label="文本排列方向">
      <s-radio-group v-model="options.align" :options="alignList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否范围选择">
      <s-radio-group v-model="options.ranger" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否可清除">
      <s-radio-group v-model="options.clearable" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否无边框">
      <s-radio-group v-model="options.borderless" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否自定义文本">
      <s-radio-group v-model="options.formate" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否限制范围">
      <s-radio-group v-model="options.interval" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否只读">
      <s-radio-group v-model="options.readonly" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="是否禁用">
      <s-radio-group v-model="options.disabled" :options="isOrNotList"></s-radio-group>
    </s-form-item>
    <s-form-item label="日期时间选择器示例">
      <s-datetime-picker
        :type="options.type"
        :theme="options.theme"
        :align="options.align"
        :ranger="options.ranger"
        :formate="options.formate ? 'yyyy年MM月dd日 hh时' : undefined"
        :borderless="options.borderless"
        :clearable="options.clearable"
        :interval="options.interval ? ['2023-12-03 01:00:00', '2023-12-10 10:00:00'] : undefined"
        :readonly="options.readonly"
        :disabled="options.disabled"
      ></s-datetime-picker>
    </s-form-item>
  </s-form>
</template>

<script lang="ts">
import {
  DATETIME_THEME_DEFAULT,
  DATETIME_THEME_LABEL,
  DATETIME_THEME_OPTIONS,
  DATETIME_TYPE_DEFAULT,
  DATETIME_TYPE_LABEL,
  DATETIME_TYPE_OPTIONS,
  TEXT_ALIGN_DEFAULT,
  TEXT_ALIGN_LABEL,
  TEXT_ALIGN_OPTIONS,
} from "@smartcity/simple-ui";
import { Component, Vue } from "vue-property-decorator";

@Component
export default class DefaultDatetimePicker extends Vue {
  /**
   * @description: 日期时间选择器类型
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly datetimePickerTypeList = DATETIME_TYPE_OPTIONS.map((type) => ({
    value: type,
    label: DATETIME_TYPE_LABEL.get(type),
  }));

  /**
   * @description: 日期时间选择器主题
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly datetimePickerThemeList = DATETIME_THEME_OPTIONS.map((type) => ({
    value: type,
    label: DATETIME_THEME_LABEL.get(type),
  }));

  /**
   * @description: 文本排列方向
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly alignList = TEXT_ALIGN_OPTIONS.map((type) => ({
    value: type,
    label: TEXT_ALIGN_LABEL.get(type),
  }));

  /**
   * @description: 是否列表
   * @private
   * @readonly
   * @type {Array<Object>}
   */
  readonly isOrNotList = [
    { value: true, label: "是" },
    { value: false, label: "否" },
  ];

  /**
   * @description: 日期时间选择器配置
   * @private
   * @type {Object}
   */
  options = {
    type: DATETIME_TYPE_DEFAULT,
    theme: DATETIME_THEME_DEFAULT,
    align: TEXT_ALIGN_DEFAULT,
    ranger: false,
    clearable: true,
    borderless: false,
    interval: false,
    formate: false,
    readonly: false,
    disabled: false,
  };
}
<\/script>
`; export { e as default };
